
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="keywords" content="CropZoom,jquery插件" />
        <meta name="description" content="Helloweba演示平台，演示XHTML、CSS、jquery、PHP案例和示例" />
        <title>CropZoom图片裁剪插件</title>
        <link rel="stylesheet" type="text/css" href="__ROOT__/public/css/main.css" />
        <link href="__ROOT__/public/css/jquery-ui-1.10.3.custom.min.css" rel="Stylesheet" type="text/css" /> 
        <style type="text/css">
            .crop{width:680px; margin:20px auto; border:1px solid #d3d3d3; padding:4px; background:#fff}
            #cropzoom_container{float:left; width:500px}
            #preview{float:left; width:150px; height:200px; border:1px solid #999; margin-left:10px; padding:4px; background:#f7f7f7;}
            .page_btn{float:right; width:150px;  margin-top:20px; line-height:30px; text-align:center}
            .clear{clear:both}
            .btn{cursor:pointer}
        </style>
        <script type="text/javascript" src="__ROOT__/public/js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="__ROOT__/public/js/jquery-ui-1.10.3.custom.min.js"></script>
        <script type="text/javascript" src="__ROOT__/public/js/jquery.cropzoom.js"></script>
        <script type="text/javascript" src="__ROOT__/public/js/jquery.form.min.js"></script>
        <script type="text/javascript" src="__ROOT__/public/js/ThinkBox/jquery.ThinkBox.min.js"></script>
        <link rel="stylesheet" type="text/css" href="__ROOT__/public/js/ThinkBox/css/ThinkBox.css" media="all" />
        <script type="text/javascript">
            $(function() {
                var cropzoom;
                var bar = $('.bar');
                var percent = $('.percent');
                $('#upload').ajaxForm({
                    url: '{:U("Index/uploadImg")}',
                    dataType: 'json',
                    beforeSubmit: function() {
                        var percentVal = '0%';
                        bar.width(percentVal)
                        percent.html(percentVal);
                    },
                    uploadProgress: function(event, position, total, percentComplete) {
                        var percentVal = percentComplete + '%';
                        bar.width(percentVal)
                        percent.html(percentVal);
                    },
                    success: function() {
                        var percentVal = '100%';
                        bar.width(percentVal)
                        percent.html(percentVal);
                    },
                    complete: function(data) {
                        var data = $.parseJSON(data.responseText);
                        cropzoom = $('#cropzoom_container').cropzoom({
                            width: 500,
                            height: 360,
                            bgColor: '#ccc',
                            enableRotation: true,
                            enableZoom: true,
                            selector: {
                                w: 150,
                                h: 200,
                                centered: true,
                                bgInfoLayer: '#fff',
                                borderColor: 'blue',
                                borderColorHover: 'yellow'
                            },
                            image: {
                                source: data['data'],
                                width: 450,
                                height: 800,
                                minZoom: 30,
                                maxZoom: 150
                            }
                        });
                    }
                });
                $("#crop").click(function() {
                    cropzoom.send('crop_img.php', 'POST', {}, function(imgRet) {
                        $("#generated").attr("src", imgRet);
                    });
                });
                $("#restore").click(function() {
                    $("#generated").attr("src", "tmp/head.gif");
                    cropzoom.restore();
                });

                //点击上传区域触发选择文件并上传
                function bindup() {
                    $('#preview').bind('click', function() {
                        $('#user-pic').click();
                        $('#user-pic').one('change', function() {
                            if ($(this).val() !== '') {
                                $('#upload').submit();
                                $.ThinkBox.success('');
                                $('#preview').unbind();
                            }
                        });
                    });
                }
                bindup();
            });
        </script>

    </head>
    <div class="progress">
        <div class="bar"></div >
        <div class="percent">0%</div >
    </div>
    <body>
        <div id="uploadPic" style="display:none;">
            <form action="{:U('Index/cropImg')}" method="post" id="upload" enctype="multipart/form-data">
                <input type="file" name="user-pic" id="user-pic" /> 
            </form>
        </div>
        <div id="main">
            <h2 class="top_title">图片裁剪：CropZoom插件的应用</h2>
            <div class="crop">
                <div id="cropzoom_container"></div>
                <div id="preview"><img id="generated" src="tmp/head.gif"  /></div>

                <div class="page_btn">
                    <input type="button" class="btn" id="crop" value="剪切照片" />
                    <input type="button" class="btn" id="restore" value="重新上传" />
                </div>
                <div class="clear"></div>
            </div>
            <div class="ad_demo"></div><br/>
        </div>
        <div id="footer">
            <p></p>
        </div>

    </body>
</html>
